
import React,{Component} from "react"
import "./shopping.css"
export default class NotFound extends Component{
    render(){
        return <div className="shopping">
             <div className="fix-top">
                <i className="left"></i>
                <h4>购物车</h4>
                <i className="right"></i>
            </div>
            <div className='main'>
            {/* 购物车为空时 */}
                <div className='kong' style={{display:'none'}}>
                    <span className="iconfont icon-shopping-bag"></span>
                    <h3>购物车暂无商品</h3>
                    <a href="javascript:;">现在选购</a>
                </div>


            {/* 购物车不为空时 */}
                <div className='wrapper' style={{display:'block'}}>
                    <ul className='cart'>
                        {
                            <li className='cart-item'>
                                <div className='checkbox'>  {/*单选按钮 */}
                                    <input type="checkbox" className='check'></input>
                                </div>
                                <div className="wrap">
                                    <a herf="javascrip:;" className='pic'><img src=""/></a> {/*图片位置 */}
                                    <div className='info'>
                                        <h4 className='title'>地平线 8 号旅行箱 冰川粉</h4>
                                        <p className='item-attrs'><span>冰川粉</span>&nbsp;&nbsp;<span>20英寸</span></p>
                                        <div className='price-counter'>
                                            <div className="cointer">
                                                <span className='red'>-</span>
                                                <span className='num'>1</span>
                                                <span className='add'>+</span>
                                            </div>
                                            <p className='price'>￥399.00</p>
                                        </div>
                                    </div> {/*商品信息 */}
                                    <span className='del'>删除</span>
                                </div>
                            </li>
                        }
                    </ul>
                    <div className='bottom-bar'>
                        <div className='left'>
                            <input type='checkbox' className='checkAll'></input>
                            <p>已选<span>0</span>件</p>
                        </div>
                        <div className='zongjia'>合计：<span>￥0</span></div>
                        <span className='bar'>
                            结算
                        </span>
                    </div>
                    <span className='nums'>0</span>
                </div>
            </div>
        </div>
    }
}